﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Localizacao.aspx.cs" Inherits="EasyFrota_Mobile.Localizacao" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    
     
    <div id="map_canvas" style="width: 100%; height: 400px;"></div>
                   
              
    <div data-role="collapsible" id="Storage">
        <h4>Viatura</h4>
        <table data-role="table" id="tabela_viaturas" data-mode="reflow" class="ui-responsive table-stroke">
            <thead>
                <tr>
                    <th data-priority="1">Matricula</th>
                    <th></th>
                    <th data-priority="2">Matricula</th>
       
                </tr>
            </thead>
    
            <tbody>
                <fieldset data-role="controlgroup" data-type="horizontal">   
                    <asp:DropDownList ID="dropDownCategorias" runat="server" 
           
                                      onselectedindexchanged="dropDownCategorias_SelectedIndexChanged" data-native-menu="false">
                    </asp:DropDownList></fieldset>
                <asp:Literal ID="LiteralTabelaCarros" runat="server"></asp:Literal>
            </tbody>
        </table>
     
    </div>
    
 <div data-role="dialog" id="dia"> 
    <div data-role="content"> 
        <p>This is Page 2</p>
        <button type="submit" data-theme="e" name="submit" value="submit-value" id="submit-button-2">Close Dialog</button>
    </div>
</div>


      <script type="text/javascript">
    //<![CDATA[
          var geocoder;
          var point = 0;
          var updateTimeout = "15s";
          var IdActual;
          var info = [];
          var veiculos = [];
          var associativo = [];
          var cbs;
          var flag;
          function seleciona(source) {

              flag = source.checked;
             
             if(flag==true) {
                
                 IdActual = source.value;
                 veiculos.push(IdActual);
                 mostrarMapa(IdActual);
             //    mostra(veiculos);
             }
              
              if (flag==false) {
                  IdActual = source.value;


                  veiculos.pop(IdActual);
                  removerMarcador(IdActual);
                  //  mostra(veiculos);
              }
//              if (source.checked == false) {
//               
//                  alert(flag);
//                  IdActual = source.value;
//                  //veiculos.pop(IdActual);
//                  remMarker(IdActual);
//                  veiculos.pop(IdActual);
//                 
//                 // mostra(veiculos);
//                 
//              }
//             if(source.checked==true){
//                  flag = true;
//                  alert(flag);
//                  IdActual = source.value;
//                  veiculos.push(IdActual);
//                 
//                  mostrarMapa(IdActual);
//                //  mostra(veiculos);
//              }
              



          };
          
     /* function mostra(veiculos) {
              for(var i=0;i<veiculos.length;i++) {
                  alert(veiculos[i]);
              }
          }*/ 

          function initialize() {

              geocoder = new google.maps.Geocoder();
              var portugal = new google.maps.LatLng(39.563, -6.8);
              point = "0";
              var myOptions = {
                  zoom: 6,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  streetViewControl: false,
                  scaleControl: false,
                  scrollwheel: false,
                  center: portugal
              };
              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

          }
          
         
          
          function mostrarMapa(idActual) {
          if(flag==true) {
           //   alert(flag);
              $.ajax({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  url: "../Servicos/localveiculo.asmx/ObterCoordenadasDaLocalidade",
                  data: "{ IdViatura: " + idActual + "}",
                  dataType: "json",
                  async: false,
                  success: function (response) {
                      // var id = response.d[0].IdViatura;
                      var matricula = response.d[0].Matricula;
                      var tipo = response.d[0].TipoViatura;
                      var lat = response.d[0].Latitude;
                      var lng = response.d[0].Longitude;
                      var lig = response.d[0].Ligado;
                      // alert(id);
                      // alert(matricula);
                      // alert(tipo);
                      // alert(lat);
                      // alert(lng);
                      CriarMarcador(idActual, matricula, tipo, lat, lng,lig);
                  },
                  error: function (request, status, error) {
                  }
              });
          };
          };
//            $.getJSON("GpsUpdate.ashx", "idActual=" + idActual,
//                                function(data) {
//                                    alert("entrei");
//                                    $(data).each(function(idx) {

//                                        alert('yes!');
//                                    });
//                                }
//                            );
//             
//              var param = idActual;

//              $.ajax({
//                  url: 'GpsUpdate.ashx',
//                  type: 'POST',
//                  data: { 'idActual': param },
//                  dataType: "json",

//                  success: function(data) {

//                      alert('Sucesso.' + data.msg);
//                  },
//                  error: function(data) {

//                      alert($(data).errorElement);
//                          alert($(data).error);
//                      alert($(data).status);
//                      alert($(data).textStatus);
//                      alert('Erro ' + data);
//                  }
//              });
//             









             /* $.getJSON('GpsUpdate.ashx?idActual=' + idActual, function(data) {
                  alert('s');
                 $(data).each( data.markers, function() {
                     alert("aaa");

                      veiculos[idActual] =CriarMarcador(this.IdViatura, this.matricula, this.tipoViatura, this.latitude, this.longitude);
                     
                  });
              }
              );*/
                  
              
              
                  

          //ISTO DEPOIS DE CHAMAR O HANDLER e TRATAR A INFORMAÇAO EM JSON
          function CriarMarcador(idActual, matricula, tipoVia, lat, lng, lig) {

            
           
           
              var point = new google.maps.LatLng(lat, lng);
              var car = new google.maps.MarkerImage();

              if (tipoVia == "Ligeiro" || tipoVia == "Misto") {
                  if (lig == "Não") {
                       car.url = "images/cars/carofficon-0.png";
                  } 
                  else {
                       car.url = "images/cars/caricon-0.png";
                  }
                 
                  car.size = new google.maps.Size(32, 32);
                  car.anchor = new google.maps.Point(16, 16);
              }

              if (tipoVia == "Grua") {
                  if(lig=="Não") {
                      car.url = "Images/Cars/gruaofficon-0.png";
                  } else {
                  car.url = "Images/Cars/gruaicon-0.png";
              }
                  car.size = new google.maps.Size(32, 32);
                  car.anchor = new google.maps.Point(16, 16);
              }

              if (tipoVia == "Pesado") {
                  if (lig == "Não") {
                      car.url = "Images/Cars/camiaoofficon-0.png";
                  } else {
                      car.url = "Images/Cars/camiaoicon-0.png";
                  }
                  car.size = new google.maps.Size(32, 32);
                  car.anchor = new google.maps.Point(16, 16);
              }


              var desc = tipoVia;
              var shadow = new google.maps.MarkerImage('images/caricon_shadow.png', new google.maps.Size(42, 18), new google.maps.Point(0, 0), new google.maps.Point(16, 16));
              var marker = new google.maps.Marker({
                  position: point,
                  icon: car,
                  shadow: shadow,
                  clickable: true,
                  title: desc,
                  draggable: true,
                  map: map
              });
              
              associativo[idActual] = marker;
              info[idActual] = google.maps.event.addListener(marker, 'click', function() {

                  if (tipoVia != "Grua") {


                      //jQuery.mobile.changePage($("#dia", { role: "dialog" }));
                      infowindow = new google.maps.InfoWindow({
                          content: "Matricula: " + matricula + "<br/> Categoria:" + tipoVia + "<br/>" +"Ligado:" +lig
                      });
                  } else {

                      infowindow = new google.maps.InfoWindow({
                          content: "Categoria: " + matricula
                      });

                  }

                  infowindow.open(map, marker);

              });

              info[idActual] = google.maps.event.addListener(marker, "drag", function() {
                  // Add a alert: Are you sure you want to remove this marker?

                  marker.setMap(null);

              });


          };

          function removerMarcador(id) {
              var marker = associativo[id];
              marker.setMap(null);
          }
                     
      </script>


<!--  
  $('#map_canvas').gmap('addMarker', {
                  'position': new google.maps.LatLng(39.563, -6.8),
                  'bounds': true
              }).click(function () {
                 
              });
 demo.add(function () {
                $('#map_canvas').gmap({
                    'center': portugal,
                    'zoom': 6,
                    'disableDefaultUI': true,
                    'callback': function () {

                        var self = this;
                        self.addMarker({ 'position': this.get('map').getCenter() }).click(function () {
                            self.openInfoWindow({ 'content': 'Hello World!' }, this);
                        });
                    }



                });

            }).load();
            if ($('input[name=checkbox1]').is(':checked')) {
                alert("a");
            }*/
     
     -->
    
</asp:Content>